<template>
	<div class="page">
		<Head navTitle="全部赛事" isIndex />
		<div class="page-container ">
			<div class="game-container flex">
				<div class="bs-panel ht-panel game-list-panel ">
					<el-tabs v-model="activeName">
						<el-tab-pane label="全部229" name="first">
							<div class="game-scroll-lists" v-infinite-scroll="gload" infinite-scroll-disabled="gdisabled">
								<div class="game-list-card" v-for="(item,index) in glist" :key="index" @click="gameClick(index)">
									<div class="game-list-head flex-center flex-zBetween">
										<div class="game-title">澳大利亚足球联赛</div>
										<div class="game-time">2021 04-21 04:00</div>
									</div>
									<div class="game-pk-body flex-center flex-hc">
										<div class="game-text">adadsfadfasdadfasdfasdadadsfadfasdadfasdfasdadadsfadfasdadfasdfasd</div>
										<div class="game-pk"><img src="../../assets/images/pk.png"></div>
										<div class="game-text">德岛漩涡德岛漩涡德岛漩涡</div>
									</div>
								</div>
								<div class="load-more" v-if="gloading"><i class="el-icon-loading"></i> 加载中...</div>
								<div class="load-more" v-if="gnoMore">没有更多了</div>
							</div>
						</el-tab-pane>
						<el-tab-pane label="今日80" name="second">
						</el-tab-pane>
						<el-tab-pane label="明日61" name="third">
						</el-tab-pane>
						<el-tab-pane label="筛选联盟shaixuanlianmeng" name="fourth">
							<div class="game-scroll-lists" v-infinite-scroll="uload" infinite-scroll-disabled="gdisabled">
								<div class="union-list">
									<el-row :gutter="16">
										<el-col :span="12" v-for="item in ulist" :key="item">
											<div class="union-card">
												<div class="union-title">丙级联赛·13组[ESP]</div>
											</div>
										</el-col>
									</el-row>
								</div>
								<div class="load-more" v-if="uloading"><i class="el-icon-loading"></i> 加载中...</div>
								<div class="load-more" v-if="unoMore">没有更多了</div>
							</div>
						</el-tab-pane>
					</el-tabs>
				</div>
				<div class="flex_bd" v-if="windowWidth > 1000">
					<el-row :gutter="16">
						<el-col :xs="24" :lg="11">
							<div class="bs-panel ht-panel">
								<div class="g-panel_hd flex-center flex-zBetween">
									<div class="g-count flex-center">
										<div class="g-text">距离关盘guliguanpan</div>
										<van-count-down :time="Counttime">
											<template #default="timeData">
												<span class="time-block">{{ timeData.hours }}</span>
												<span class="colon">:</span>
												<span class="time-block">{{ timeData.minutes }}</span>
												<span class="colon">:</span>
												<span class="time-block">{{ timeData.seconds }}</span>
											</template>
										</van-count-down>
									</div>
									<div class="g-action flex-center">
										<div class="g-time">16:40 更新</div>
										<el-button size="mini" type="success">刷新</el-button>
									</div>
								</div>
								<div class="game-vs">
									<div class="vs-title">澳大利亚职业足球联赛</div>
									<div class="vs-flex flex-center flex-hc">
										<div class="vs-title">神户胜利船shenghushenglichuan</div>
										<div class="vs-card_bd">
											<div class="vs-value">反波胆 <span class="score">0-1</span></div>
											<div class="vs-time">2021 04-21 04:00</div>
										</div>
										<div class="vs-title">德岛漩涡dedaoxuanwo</div>
									</div>
								</div>
								<el-table stripe v-infinite-scroll="load" infinite-scroll-disabled="disabled" :data="tableData" style="width: 100%" class="j-table">
									<el-table-column :min-width="width1" align="center" prop="prjtit" label="项目" >
									</el-table-column>
									<el-table-column  :min-width="width2" align="center" prop="pval" label="获利" >
									</el-table-column>
									<el-table-column  :min-width="width3" prop="ptrade" align="center">
										<template slot="header">
											<div class="j-label">可交易量1</div>
										</template>
										<template slot-scope="scope">
											<div class="j-items flex-center">
												<span class="j-val">{{scope.row.ptrade}}</span>
												<el-button @click="setVisible = true" size="mini" type="success">立即下注</el-button>
											</div>
										</template>
									</el-table-column>
								</el-table>
								<div class="load-more" v-if="loading"><i class="el-icon-loading"></i> 加载中...</div>
								<div class="load-more" v-if="noMore">没有更多了</div>
							</div>
						</el-col>
						<el-col :xs="24" :lg="13">
							<div class="g-list-table-panel">
							<div class="bs-panel ht-panel  ">
								<div class="ball-table">
									<el-table stripe v-infinite-scroll="load2" infinite-scroll-disabled="disabled" :data="tableData2"
										style="width: 100%">
										<el-table-column  prop="jtit" align="center" label="项目" width="120">
										</el-table-column>
										<el-table-column  prop="jprice" align="center" label="交易量" width="180">
										</el-table-column>
										<el-table-column prop="progress" align="center" label="进度">
											<template slot-scope="scope">
												<el-progress stroke-width="12" :percentage="scope.row.progress"></el-progress>
											</template>
										</el-table-column>
									</el-table>
								</div>
								<div class="load-more" v-if="loading2"><i class="el-icon-loading"></i> 加载中...</div>
								<div class="load-more" v-if="noMore2">没有更多了</div>
							</div>
							<div class="bs-j-footer flex flex-zBetween">
								<div class="j-data"><span class="text">总交易量</span> <span
										class="val">2,853,799,558</span></div>
								<div class="j-time"><span class="text">最后更新时间</span> <span class="val">04-25
										16:29</span></div>
							</div>
							</div>
						</el-col>
					</el-row>
				</div>
			</div>
		</div>
		<!-- 您正在		下注-->
		<el-dialog custom-class="bs-dialog bs-index-dialog" title="您正在" :visible.sync="setVisible" width="620px">
			<div class="game-vs">
				<div class="vs-title">澳大利亚职业足球联赛</div>
				<div class="vs-flex flex-center flex-hc">
					<div class="vs-title">神户胜利船shenghushenglichuan</div>
					<div class="vs-card_bd">
						<div class="vs-value">反波胆 <span class="score">0-1</span></div>
						<div class="vs-time">2021 04-21 04:00</div>
					</div>
					<div class="vs-title">德岛漩涡dedaoxuanwo</div>
				</div>
			</div>
			<div class="popup-form">
				<div class="popup-cell">
					<div class="analy-select-btns flex-center flex-hc">
						<el-radio-group v-model="radioSelVal" @change="tabchange()">
							<el-radio v-for="(item,index) in selectTabs" :label="item.value" :key="index" border>{{item.text}}</el-radio>
						</el-radio-group>
					</div>
				</div>
				<div class="popup-cell">
					<div class="p-label">交易金额</div>
					<div class="popup-cell_bd">
						<el-input @input="input" v-model="jprice" placeholder="请输入交易金额"></el-input>
					</div>
				</div>
				<div class="popup-cell">
					<div class="p-label">获利</div>
					<div class="popup-cell_bd">5.03%</div>
				</div>
				<div class="popup-cell">
					<div class="p-label">预估获利</div>
					<div class="popup-cell_bd flex-center flex-zBetween">
						<div class="k-value text-green">{{resultPrice}}</div>
						<div class="y-info">手续费0.5%</div>
					</div>
				</div>
				<div class="popup-cell">
					<div class="p-label">可选金额</div>
					<div class="popup-cell_bd flex-center">
						<div class="flex_bd">
							<div class="analy-select-btns flex-center">
								<el-radio-group v-model="radioPrice" @change="pricechange()">
									<el-radio v-for="(item,index) in selectPrice" :label="item" :key="index" border>{{item.text}}</el-radio>
								</el-radio-group>
							</div>
						</div>
						<div class="set-icon" @click="valVisible = true"><span class="iconfont icon-shezhi"></span>
						</div>
					</div>
				</div>
				<div class="popup-cell">
					<div class="p-label">可用余额</div>
					<div class="popup-cell_bd">
						<div class="k-value text-green">10,012,912.00</div>
					</div>
				</div>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button type="success" @click="resVisible = true">确 定</el-button>
				<el-button type="info" @click="setVisible = false">取 消</el-button>
			</div>
		</el-dialog>
		<el-dialog custom-class="bs-dialog bs-index-dialog" title="您正在" :visible.sync="valVisible" width="620px">
			<div class="game-vs">
				<div class="vs-title">澳大利亚职业足球联赛</div>
				<div class="vs-flex flex-center flex-hc">
					<div class="vs-title">神户胜利船shenghushenglichuan</div>
					<div class="vs-card_bd">
						<div class="vs-value">反波胆 <span class="score">0-1</span></div>
						<div class="vs-time">2021 04-21 04:00</div>
					</div>
					<div class="vs-title">德岛漩涡dedaoxuanwo</div>
				</div>
			</div>
			<div class="bs-val-form">
				<el-form ref="form" :model="form" label-position="top">
					<el-form-item label="第一 设定值diyishedingzhi：">
						<el-input v-model="form.value1" placeholder="请输入"></el-input>
					</el-form-item>
					<el-form-item label="第二 设定值diershedingzhi：">
						<el-input v-model="form.value2" placeholder="请输入"></el-input>
					</el-form-item>
					<el-form-item label="第二 设定值diershedingzhi：">
						<el-input v-model="form.value3" placeholder="请输入"></el-input>
					</el-form-item>
				</el-form>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button type="success" @click="valVisible = false">确 定</el-button>
				<el-button type="info" @click="valVisible = false">取 消</el-button>
			</div>
		</el-dialog>
		<el-dialog custom-class="bs-dialog bs-index-dialog" title="交易成功" :visible.sync="resVisible" width="620px">
			<div class="game-vs">
				<div class="vs-title">澳大利亚职业足球联赛</div>
				<div class="vs-flex flex-center flex-hc">
					<div class="vs-title">神户胜利船shenghushenglichuan</div>
					<div class="vs-card_bd">
						<div class="vs-value">反波胆 <span class="score">0-1</span></div>
						<div class="vs-time">2021 04-21 04:00</div>
					</div>
					<div class="vs-title">德岛漩涡dedaoxuanwo</div>
				</div>
			</div>
			<div class="popup-form">
				<div class="popup-cell">
					<div class="p-label">队伍名称</div>
					<div class="popup-cell_bd">guangzhou city chongqingliangjiang athletlc</div>
				</div>
				<div class="popup-cell">
					<div class="p-label">交易金额</div>
					<div class="popup-cell_bd">200,000.00</div>
				</div>
				<div class="popup-cell">
					<div class="p-label">预估获利</div>
					<div class="popup-cell_bd">78,000.00</div>
				</div>
				<div class="popup-cell">
					<div class="p-label">注单号码</div>
					<div class="popup-cell_bd">2104160575471717</div>
				</div> 
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button type="success" @click="goUrl('/settlement')">前往交易明细qianwangjiaoyimingxi</el-button>
			</div>
		</el-dialog>
		<!-- 手机foter -->
		<Foot :active="1" />
	</div>
</template>

<script>
	// @ is an alias to /src
	import Head from '@/components/Head.vue'
	import Foot from "@/components/Foot.vue";
	export default {
		name: 'Home',
		components: {
			Head,Foot
		},
		computed: {
			noMore() {
				return this.count >= 20
			},
			disabled() {
				return this.loading || this.noMore
			},
			gnoMore() {
				return this.gcount >= 20
			},
			gdisabled() {
				return this.gloading || this.gnoMore
			},
			noMore2() {
				return this.gcount >= 20
			},
			disabled2() {
				return this.gloading || this.gnoMore
			}
		},
		data() {
			return {
				Counttime: 30 * 60 * 60 * 1000,
				activeName:'first',
				tableData: [{
					prjtit: '0-0',
					pval: '10.34%',
					ptrade: '289,832,201.00'
				}, {
					prjtit: '0-0',
					pval: '10.34%',
					ptrade: '289,832,201.'
				}, {
					prjtit: '0-0',
					pval: '10.34%',
					ptrade: '289,832,.00'
				}, {
					prjtit: '0-0',
					pval: '10.34%',
					ptrade: '289,832,201.00'
				}, {
					prjtit: '0-0',
					pval: '10.34%',
					ptrade: '289,201.00'
				}, {
					prjtit: '0-0',
					pval: '10.34%',
					ptrade: '289,832,201.00'
				}, {
					prjtit: '0-0',
					pval: '10.34%',
					ptrade: '289,,201.00'
				}, ],
				tableData2: [{
					jtit: '0-0',
					jprice: '289,832,201.00',
					progress: 14
				}, {
					jtit: '0-0',
					jprice: '289,832,201.00',
					progress: 14
				}, {
					jtit: '0-0',
					jprice: '289,832,201.00',
					progress: 14
				}, {
					jtit: '0-0',
					jprice: '289,832,201.00',
					progress: 14
				}, {
					jtit: '0-0',
					jprice: '289,832,201.00',
					progress: 14
				}, {
					jtit: '0-0',
					jprice: '289,832,201.00',
					progress: 14
				}, {
					jtit: '0-0',
					jprice: '289,832,201.00',
					progress: 14
				}, {
					jtit: '0-0',
					jprice: '289,832,201.00',
					progress: 14
				}, {
					jtit: '0-0',
					jprice: '289,832,201.00',
					progress: 14
				}, {
					jtit: '0-0',
					jprice: '289,832,201.00',
					progress: 14
				}, ],
				count: 10,
				loading: false,
				count2: 10,
				loading2: false,
				glist:[1,2,3,4,5,5],
				gcount: 10,
				gloading: false,
				ulist:[1,2,3,4,5,5,1,2,3,4,5,5],
				ucount: 10,
				uloading: false,
				
				// 弹出
				valVisible: false,
				setVisible: false,
				resVisible: false,
				form: {
					value1: '',
					value2: '',
					value3: '',
				},
				jprice:'',
				radioPrice:'',
				selectPrice: [{
						"value": 200000,
						"text": "+200000"
					},
					{
						"value": 1000000,
						"text": "+1000000",
					},
					{
						"value": 5000000,
						"text": "+5000000"
					},
					{
						"value": 6200000,
						"text": "全部"
					}
				],
				radioSelVal:1,
				selectTabs: [{
						"value": 1,
						"text": "正波"
					},
					{
						"value": 2,
						"text": "反波",
					},
				],
				resultPrice:0,
				windowWidth: document.documentElement.clientWidth,
				width1:'20%',
				width2:'24%',
				width3:'56%'
			};
		},
		mounted() {
			var that = this;
			window.onresize = () => {
				return (() => {
					window.fullWidth = document.documentElement.clientWidth;
					that.windowWidth = window.fullWidth; // 宽
				})()
			};
			this.widthAuto()
		},
		methods: {
			load() {
				this.loading = true
				setTimeout(() => {
					for (let i = 0; i < 15; i++) {
						this.tableData.push({
							prjtit: '0-0',
							pval: '10.34%',
							ptrade: '289,832,201.00'
						});
					}
					this.loading = false
				}, 1000)
			},
			gload() {
				this.gloading = true
				setTimeout(() => {
					for (let i = 0; i < 15; i++) {
						this.glist.push(this.glist.length+1);
					}
					this.gloading = false
				}, 1000)
			},
			uload() {
				this.uloading = true
				setTimeout(() => {
					for (let i = 0; i < 8; i++) {
						this.ulist.push(this.ulist.length+1);
					}
					this.uloading = false
				}, 1000)
			},
			load2() {
				this.loading2 = true
				setTimeout(() => {
					for (let i = 0; i < 4; i++) {
						this.tableData2.push({
							jtit: '0-0',
							jprice: '289,832,201.00',
							progress: 14
						});
					}
					this.loading2 = false
				}, 1000)
			},
			gameClick(val) {
				let that = this;
				console.log("实时屏幕宽度：", val, that.windowWidth);
				if (that.windowWidth<1000) {
					this.$router.push('/gameDetail');
				} else{
					alert(val)
				}
			},
			widthAuto() {
				let that = this;
				if (that.windowWidth<1500) {
					this.width1 = "15%"
					this.width2 = "24%"
					this.width3 = "56%"
				} else{
					this.width1 = "16%"
					this.width2 = "50%"
					this.width3 = "40%"
				}
			},
			goUrl(url){
				this.$router.push(url);
			},
		}
	}
</script>
